<template>
  <q-dialog v-model="show" persistent>
    <q-card class="dialog-content halt-detail" style="min-width: 1000px; max-height: 500px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
          <q-btn
            style="font-size: 18px;color: white"
            flat round dense
            class="iconfont icontubiao-67 white close-btn dialog"
            @click="$emit('close')"
          />
          <span class="font-size-16">
            正常循环明细
          </span>
        </div>
      </q-card-section>
      <q-card-section style="padding: 0" class="page-content">
        <q-table
          class="users-table scroll my-sticky-virt scroll-table myTable"
          :columns="tableColumns"
          :data="tableData"
          row-key="id"
          :pagination.sync="pagination"
          color="primary"
          :hide-bottom="tableData.length != 0"
          style="max-height: 300px;margin: 0"
        >
          <template v-slot:body-cell-work="props">
            <q-td>
              {{props.row.productName}} （{{props.row.processNo || '—'}}-{{props.row.processName || '—'}}）
            </q-td>
          </template>
          <template v-slot:body-cell-programName="props">
            <q-td>
              {{props.row.programName || '—'}}
            </q-td>
          </template>
          <template v-slot:no-data>
            <div class="full-width row flex-center font-size-14" style="color: #999">
              暂无数据
            </div>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { getNormalWorkpieces } from 'src/boot/status/machine'
import { date } from 'quasar'

export default {
  name: 'normal-cycle',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    boxId: {
      default: '',
      required: true
    },
    since: {
      default: '',
      required: true
    },
    before: {
      default: '',
      required: true
    }
  },
  data () {
    return {
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 表格列
      tableColumns: [
        { name: 'time', field: 'time', label: '时间', align: 'left' },
        { name: 'work', field: 'work', label: '作业', align: 'left' },
        { name: 'programName', field: 'programName', label: '主程序号', align: 'left' },
        { name: 'roundTime', field: 'roundTime', label: '循环用时', align: 'left' }
      ],
      tableData: []
    }
  },
  methods: {
    // 转换时长
    getDuration (second) {
      var days = Math.floor(second / 86400)
      var hours = Math.floor((second % 86400) / 3600)
      var minutes = Math.floor(((second % 86400) % 3600) / 60)
      var seconds = Math.floor(((second % 86400) % 3600) % 60)
      var duration = (days > 0 ? days + '天' : '') + (hours > 0 ? hours + '小时' : '') + (minutes > 0 ? minutes + '分' : '') + seconds + '秒'
      return duration
    },
    getNormalCycle () {
      console.log(this.boxId, 'boxId')
      getNormalWorkpieces(this.boxId, this.since, this.before).then(res => {
        res.data.forEach(o => {
          o.time = date.formatDate(new Date(o.time), 'YYYY-MM-DD HH:mm:ss')
          o.roundTime = this.getDuration(o.spendTime)
          o.productName = o.productName.indexOf('-') === -1 ? o.productName : '无'
        })
        this.tableData = res.data
      }).finally(
        this.$emit('getDetailedCount')
      )
    }
  },
  watch: {
    show: function (newVal) {
      // console.log(newVal)
      if (newVal) {
        this.getNormalCycle()
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.q-table__bottom--nodata{
    min-height auto
    padding 6px 0 0
  }
</style>
